<!-- 
 @Author: LW  
 @Date: 2021-01-11 13:49:57  
 @function:业务管理-商品分类
----------------------------------------------------------  
 @Last Modified by: 
 @Modified function:
 --> 
<template>
  <div>
    <el-card class="box-card card1">
      <div class="searchBox">
        <el-form :inline="true" :model="formSearch">
          <el-form-item label="分类名称：">
            <el-input v-model="formSearch.parameters" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
            <el-button size="mini" type="primary" icon="el-icon-upload2" v-if="canUp==true" @click="handleMove(1)">上移</el-button>
            <el-button size="mini" type="primary" icon="el-icon-download" v-if="canDown==true" @click="handleMove(2)">下移</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            :data="listData"
            :height="tableHeight"
            row-key="id"
            @row-click="selectSingle"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column align="left" header-align="center" prop="name" label="分类名称" width="300">
              <template slot-scope="scope">
                <el-radio
                  v-model="tableRadio"
                  :label="scope.row"
                  @change.native="getTemplateRow(scope.$index,scope.row)"
                  style="margin-left:5px;margin-right:5px !important;"
                >&nbsp;</el-radio>
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" header-align="center" prop="remarks" label="备注"   width="320" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  size="mini"
                  class="btnBlue1"
                  @click="handleAdd(scope.$index, scope.row)"
                >新增</el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-remove"
                  size="mini"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑等操作弹窗 -->
    <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :top="editForm.top"
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <component v-bind:is="curComponent" v-bind:formInfo="formInfo"  @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>

<script>
//引用对象
import EditForm from "./components/edit"; //编辑
import GoodsHttp from "@/api/business/goodscategories"; //http
//定义变量
const {
  loadCategoriesList, //获取商品分类列表
  moveSort, //移动操作 flag==1上移   flag==2下移
  removeInfo //删除信息
} = GoodsHttp;
export default {
  components: {
    EditForm,
  },
  data() {
    return {
      //列表相关
      tableHeight: window.innerHeight * 0.818, //表格高度
      listData: [],
      tableRadio: {}, //单选选中 行信息
      canUp: true,
      canDown: true,
      formSearch: {
        parameters: ""
      },
      //编辑框窗体参数
      editForm: {
        top:"25vh",
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: "", 
      },
      curComponent: null,
      formInfo: {}
    };
  },
  watch: {},
  computed: {},
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取列表
    this.loadList();
  },
  //事件方法执行
  methods: {
    //获取列表数据
    loadList() {
      loadCategoriesList(this.formSearch).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
        } else {
          this.listData = data.Data;
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //搜索事件
    handleSearch() {
      this.loadList();
    },
    ///////////////////////单选事件/////////////////////
    //单选事件
    getTemplateRow(index, row) {
      this.tableRadio = row;
      this.showHideBtn(row);
    },
    selectSingle(row) {
      this.tableRadio = row;
      this.showHideBtn(row);
    },
    //显示或隐藏移动按钮
    showHideBtn(obj) {
      if (obj.have_elder) {
        this.canUp = true;
      } else {
        this.canUp = false;
      }
      if (obj.have_younger) {
        this.canDown = true;
      } else {
        this.canDown = false;
      }
    },
    //上下移动
    handleMove(type) {
      let par = {
        id: this.tableRadio.id,
        flag: type
      };
      moveSort(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          //初始化获取列表
          this.loadList();
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    /////////////////////////////////////
    //新增
    handleAdd(index, row) {
      this.formInfo = {};
      if (row != null) {
        this.formInfo.parent_id = row.id;
      }
      this.editForm.formVisible = true;
      this.editForm.formTitle = "新增菜单信息";
      this.editForm.width = "30%";
      this.curComponent = EditForm;
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改菜单信息";
        this.editForm.width = "30%";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
      }
      this.curComponent = EditForm;
    },
    //删除
    handleRemove(index, row) {
      this.$messageTip.boxWarning("确定要删除吗?")
        .then(() => {
          let par = [];
          par.push(row.id);
          removeInfo(par).then(response => {
            let data = response.data;
            if (data.Code === 1000) {
              this.$messageTip.success(data.Msg);
              this.loadList();
            } else {
              this.$messageTip.warning(data.Msg);
            }
          });
        })
        .catch(() => {
           this.$messageTip.info( "已取消删除！");
        });
    },
    //编辑操作回调
    callBack(info) {
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.loadList();
      }
    },
  }
};
</script>

